<template>
  <view>
    <action-bar :options="navOptions"></action-bar>
    <view class="manage_box">
      <!-- 全部数量及筛选 -->
      <view class="manage_box-num">
        <view class="manage_box-num-span">全部数量： {{ total }}</view>
        <view class="manage_box-num-screen">
          <view class="manage_box-num-screen-option">
            <image :src="baseImgUrl + '/manage/option.png'" mode=""></image>
          </view>
          <span class="manage_box-num-span" @click="open">筛选</span>
          <view class="manage_box-num-screen-traingle">
            <image :src="baseImgUrl + '/manage/triangle.png'" mode=""></image>
          </view>
        </view>
      </view>

      <view class="main" v-if="list.length > 0" :style="listContainerHeight">
        <scroll-view-y @refresh="refresh()" :pageNo="screening.pageNo" :pageSize="screening.pageSize" :total="total"
          @getMore="getMore()">
          <template slot="scrollView_content">
            <view class="card" v-for="(item, index) in list" :key="index">
              <view class="title">{{ item.taskName ? item.taskName : "" }}</view>
              <view class="content">单位名称：{{ item.agencyName ? item.agencyName : "" }}</view>
              <view class="content">业主反馈：{{ item.backState == "1" ? "同意" : "未反馈" }}</view>
              <view class="content">项目名称：{{ item.projectName }}</view>
              <view class="content">执业地址：{{ item.placeName || '暂无' }}</view>
              <view class="subTitle">
                合同日期：{{
                  item.startDate ? item.startDate : "无"
                }}
                至
                {{ item.endDate ? item.endDate : "无" }}
              </view>
              <view class="btnList">
                <view class="btnList-btn" @click="goToIdentify(item)">审核</view>
              </view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无报告"></no-data>
    </view>

    <!-- 筛选的弹出层 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-list">
        <uni-section title="筛选" type="circle">
          <form>
            <!-- 项目名称 -->
            <view class="formItem">
              <view class="label">项目名称</view>
              <input class="content" type="text" v-model="screening.projectName" :placeholder="'请选择项目名称'" />
            </view>

            <!-- 机构名称 -->
            <view class="formItem">
              <view class="label">项目服务类型</view>
              <picker mode="selector" class="content" :range="serviceTypeList" range-key="dictLabel"
                @change="serviceTypeChange($event)">
                <view :style="{ color: screening.serviceTypeName ? '#000' : 'gray' }">{{ screening.serviceTypeName ||
                  '请选择项目服务类型' }}</view>
              </picker>
            </view>

            <!-- 任务名称 -->
            <view class="formItem">
              <view class="label">任务名称</view>
              <input class="content" type="text" v-model="screening.taskName" :placeholder="'请选择任务名称'" />
            </view>

            <!-- 报告编号 -->
            <view class="formItem">
              <view class="label">报告编号</view>
              <input class="content" type="text" v-model="screening.reportCode" :placeholder="'请选择合同编号'" />
            </view>

          </form>
        </uni-section>
        <view class="popup-list-btn">
          <view class="btn" @click="close"> 重置 </view>
          <view class="btn" @click="sure"> 确定 </view>
        </view>
      </view>
    </uni-popup>

    <toast></toast>
  </view>
</template>

<script>
import { baseImgUrl } from "@/config.js";
import scrollViewY from "@/components/scrollViewY/index";
import { mapMutations, mapState } from "vuex";
export default {
  components: {
    scrollViewY,
  },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList,
    };
  },
  data() {
    return {
      baseImgUrl,
      navOptions: {
        left: {
          icon: "back",
        },
        center: {
          title: "待审核报告列表",
        },
      },
      list: [],
      total: 0,
      dataStatus: "刷新", // 用于解决闪烁问题
      // 项目服务类型字典
      serviceTypeList: [],
      screening: {
        // 项目名称
        projectName: null,
        // 项目服务类型字典
        serviceType: null,
        serviceTypeName: null,
        // 任务名称
        taskName: null,
        // 报告编号
        reportCode: null,
        pageNo: 1,
        pageSize: 10,
      },
      loading: false,
      // 人脸照片集合
      fileUrls: null
    };
  },
  onShow() {
    console.log(this.form.examineLeader, '这里有照片不');
    if (this.form.examineLeader != null) {
      this.fileUrls = this.form.examineLeader;
      // 调用人脸比对接口
      let item = this.$store.state.task.WbList
      this.checkPeople(item);
    }
  },
  onLoad() {
    this.getSatetType()
    this.getList();
  },
  methods: {
    ...mapMutations(['unitTask', 'save_examine']),
    // 获取字典列表
    getSatetType() {
      this.$getDict('service_type').then(res => {
        this.serviceTypeList = res
      })
    },
    // 切换项目服务类型
    serviceTypeChange(e) {
      this.$set(this.screening, 'serviceType', this.serviceTypeList[e.detail.value].dictValue)
      this.$set(this.screening, 'serviceTypeName', this.serviceTypeList[e.detail.value].dictLabel)
    },
    // 跳转至表单
    navTo(item) {
      uni.navigateTo({
        url: "./unauditedDetail?processId=" + item.processId + '&reportId=' + item.reportId + '&version=' + item.version + '&label=examineLeader'
      });
    },
    // 获取信息列表
    getList() {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()
        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });
        this.$store.dispatch("getUnauditedList", this.screening).then((res) => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 2000);
        })
      });
    },
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.$set(this.screening, 'pageNo', 1)
    },
    // 上拉加载
    getMore() {
      if (this.screening.pageNo * this.screening.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.screening.pageNo++;
      }
    },
    open() {
      this.$refs.popup.open("top");
    },
    // 筛选的确定按钮
    sure() {
      this.$set(this.screening, 'pageNo', 1)
      this.getList().then((res) => {
        this.list = res.items;
        this.$refs.popup.close();
      });
    },
    // 筛选的取消按钮
    close() {
      for (let key in this.screening) {
        if (key == 'pageNo') {
          this.$set(this.screening, key, 1)
        } else if (key == 'pageSize') {
          this.$set(this.screening, key, 10)
        } else {
          this.$set(this.screening, key, null)
        }
      }
    },
    goToIdentify(item) {
      let loginStaffId = uni.getStorageSync('staffId') || null;
      let data = {
        processId: item.processId,
        reportId: item.reportId,
        version: item.version,
        loginStaffId: loginStaffId
      }
      this.$store.commit('setWbList', data)
      uni.navigateTo({
        url: "../manage/recognition?label=examineLeader",
      });
    },
    // 人脸比对
    checkPeople(item) {
      // 人脸识别所需参数(固定写法)
      let data = {
        filePath: this.fileUrls,
        staffId: item.loginStaffId, //! 必须传执业者登录的id
      };
      this.$store
        .dispatch("checkFace", data)
        .then(({ code, data }) => {
          if (code === 200) {
            // 识别成功
            if (data == 1) {
              this.$showToast({
                show: true,
                text: "识别人脸成功",
                icon: "success",
              });
              this.navTo(item)
            } else {
              this.$showToast({
                show: true,
                text: "识别人脸失败",
                icon: 'error'
              });
            }
            // 清空图片
            // this.$store.state.unitTask.examineLeader = null;
            this.save_examine({ key: this.label, value: null })
          }
        })
    },
  },
  computed: {
    ...mapState({ form: state => state.unitTask.form }),
    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },
    // 高度 =  100vh - 导航栏高度 - 状态栏高度 -  菜单高度
    listContainerHeight() {
      // 顶部状态栏 + 标题栏的高度 单位px
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      if (actionBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + navigationBarHeight + 50) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 160rpx);";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.manage_box {
  justify-content: flex-start;
  flex-direction: column;
  padding: 0 24rpx;
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
  height: calc(100vh - 80rpx);

  .main {
    overflow: auto;

    .card {
      border-radius: 24rpx;
      background: white;
      padding: 24rpx;
      position: relative;
      margin-bottom: 24rpx;

      .title {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
      }

      .subTitle {
        color: #999;
      }

      .btnList {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10rpx;

        &-btn {
          height: 50rpx;
          line-height: 50rpx;
          display: inline-block;
          padding: 0 40rpx;
          border-radius: 45rpx;
          border: 1rpx solid #c8c8c8;
          font-size: 24rpx;
        }
      }

      &:after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        padding: 6rpx 12px;
        border-radius: 0 20rpx;
      }
    }
  }

  &-num {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-content: center;
    height: 40px;
    line-height: 40px;

    &-span {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
    }

    &-screen {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-option {
        width: 29rpx;
        height: 26rpx;
        margin-right: 9rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      &-traingle {
        margin-left: 14rpx;
        margin-top: -5rpx;
        width: 14rpx;
        height: 7rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.popup-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 80rpx;
  padding: 20rpx;

  /deep/.uni-section {
    margin-top: 0;
  }

  .formItem {
    display: flex;
    align-items: center;
    height: 80rpx;

    .label {
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 36rpx;
      width: 40%;
    }

    .content {
      flex: 1;
      text-align: right;
      font-size: 28rpx;
    }
  }

  &-btn {
    height: 80rpx;
    line-height: 80rpx;
    width: 100%;
    display: flex;

    .btn {
      flex: 1;
      text-align: center;
      border-radius: 20rpx;
      margin: 0 20rpx;
      background: $OVERALL_CLOSE_BUTTON_COLOR;
      color: $OVERALL_SITUATION_BACKGROUND
    }

    .btn:nth-child(2) {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      color: #ffffff;
    }
  }
}
</style>
